<template>
  <div id="login">
    <h1 ref="aa">login</h1>
    <ul>
      <li v-for="(v,i) in list" ref="scroll" :class="'scroll'+i" @scroll="closeOther('scroll'+i)">
        <p>
          <span>{{v}}</span>
          <button @click="del(i)">删除</button>
        </p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        "content111111111111111111111111111111111111",
        "content222222222222222222222222222222222222",
        "content333333333333333333333333333333333333"
      ]
    };
  },
  methods: {
    del(index){
      this.list.splice(index,1);
      this.$refs.scroll.forEach((v,i)=>{
          v.scrollTo(0,0)
      })
    },
    closeOther(className){
        this.$refs.scroll.forEach((v,i)=>{
           if(v.className!=className){
              v.scrollTo(0,0)
           }
        })
    }
  },  
  mounted() {
    // var self=this;
    // document.addEventListener('touchstart',function(){
    //     self.$refs.scroll.forEach((v,i) => {
    //         v.scrollTo(0,0)
    //     });
    // },true);

  }
};
</script>

<style scoped>
li {
  width: 100%;
  line-height: 0.8rem;
  height: 0.8rem;
  margin-top: 0.1rem;
  background: #ccc;
  overflow-x: scroll;
}
li::-webkit-scrollbar {
  display: none;
}
p {
  width: 120%;
  overflow: hidden;
}
button {
  float: right;
  right: 0;
  height: 0.8rem;
  width: 1rem;
}
</style>

